/**
* @author: zhazhjie
* @email: zhazhjie@vip.qq.com
* @date: 2018-06-20 10:46:17
* @version: 1.0
*/

<template>
  <section id="login">
    <div class="login-container">
      <transition name='fade-down'>
        <el-form class="login-box" v-show='showLoginBox' :model="info" :rules="rules" ref="form">
          <div class="login-tit font20">后台管理</div>
          <el-form-item prop="userName">
            <el-input size='medium' v-model="info.userName" placeholder="请输入用户名">
              <i slot="prefix" class="el-input__icon el-icon-user"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input size='medium' type="password" auto-complete="new-password" v-model="info.password"
                      placeholder="请输入密码">
              <i slot="prefix" class="el-input__icon el-icon-lock"></i>
            </el-input>
          </el-form-item>
          <el-checkbox v-model="keepPassword">记住密码</el-checkbox>
          <el-button size='medium' type='primary' :loading="loading" @click="handleLogin">登录</el-button>
        </el-form>
      </transition>
    </div>

  </section>
</template>

<script>

import {mapState} from 'vuex'
import {sysUserApi} from '@/api/sys/SysUserApi';
import {getStore, setStore} from 'js-utils'

export default {
  data() {
    let info = getStore('info', true) || {};
    return {
      loading: false,
      showLoginBox: false,
      keepPassword: !!info.userName,
      redirectUrl: this.$route.query.redirectUrl || '/',
      info: {
        userName: info.userName || 'admin',
        password: info.password || '123456',
      },
      rules: {
        userName: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 50, message: '长度在 6 到 50 个字符', trigger: 'blur'}
        ],
      }
    }
  },
  components: {},
  created() {

  },
  methods: {
    login() {
      this.loading = true;
      sysUserApi.login(this.info).then(res => {
        this.$message({
          message: '登陆成功！',
          type: 'success'
        });
        setStore('BIZ_TOKEN', res.data, true);
        if (this.keepPassword) {
          setStore('info', this.info, true);
        } else {
          setStore('info', null, true);
        }
        this.routeTo(this.redirectUrl, 1);
        this.loading = false;
      })
        .catch(err => this.loading = false)
    },
    handleLogin() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.login();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    enterCallback(e) {
      if (e.keyCode === 13) {
        this.handleLogin();
      }
    }
  },
  mounted() {
    this.showLoginBox = true;
    addEventListener('keyup', this.enterCallback)
  },
  beforeDestroy() {
    removeEventListener('keyup', this.enterCallback)
  }
}
</script>

<style lang="scss" scoped>

#login {
  width: 100vw;
  height: 100vh;
  background-color: $bg;
}

.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  width: 400px;
  overflow: hidden;
  box-shadow: 5px 5px 15px 2px $shadow;
  padding: 20px 30px;
  background: #fff;
}

.login-tit {
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.login-box .el-form-item {
  margin-top: 30px;
}

.login-box .el-button {
  width: 100%;
  margin: 20px 0;
}

.login-box .icon {
  width: 100%;
  font-size: 16px;
  margin-left: 5px;
}

.fade-down-leave-active,
.fade-down-enter-active {
  transition: all 0.5s;
}

.fade-down-enter,
.fade-down-leave-to {
  opacity: 0;
  transform: translate(-70%, -50%);
}

.login-container {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: url("http://www.17sucai.com/preview/242158/2015-01-10/%E7%99%BB%E5%BD%95/images/cloud.jpg") 0 bottom repeat-x #049ec4;
  animation: animate-cloud 20s linear infinite;
}
</style>
